<template>
  <div>
    <div class="com-chart">
      <div class="pie" ref="bar"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.bar,'walden')
      // 对图表初始化配置的控制
      const initOption = {
            title: {
            text: '各特征重要程度分析'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            yAxis: {
                type: 'category',
                data: ['CompetitionOpenSinceMonth_6', 'CompetitionOpenSinceYear_2005', 'CompetitionOpenSinceMonth_8', 'Promo2SinceYear_2011', 'CompetitionOpenSinceYear_2014', 'StoreType_c', 'StoreType_a','DayOfWeek_6','Promo2SinceYear_2013','Assortment_c','Promo2','CompetitionOpenSinceMonth_5','CompetitionOpenSinceMonth_3','CompetitionOpenSinceYear_2006','CompetitionOpenSinceYear_2013','month_12','StoreType_b','DayOfWeek_1','Promo','CompetitionDistance','Open']
            },
            xAxis: {
                type: 'value',
            },
            series: [
                {
                data: [0.005107,0.005150,0.005466,0.006578,0.006669,0.007020,0.008343,0.008446,0.008698,0.008920,0.008925,0.009072,0.009616,0.009976,0.010455,0.011928,0.014228,0.016022,0.073222,0.123744,0.460186],
                type: 'bar'
                }
            ]
      }
      this.chartInstance.setOption(initOption)
    },
  }
}
</script>


<style scoped>
.com-chart {
  margin: auto;
  margin-top:50px;
  display: flex;
  width: 80%;
}
.pie {
  flex: 1; 
  height: 500px;
  width: 500px; 
}
</style>
